<template>
  <div class="topayindex_container">
    <!-- 第一个容器的结构 -->
    <div class="first_wrap">
      <span>VIP</span>
      <el-select
        v-model="VipPullSelectValue"
        placeholder="请选择"
        filterable
        clearable
        @clear="handleQueryBtnClick"
      >
        <el-option
          v-for="item in VipPullSelectValueList"
          :key="item.id"
          :value="item.phone"
          :label="item.phone + ' ' + item.name"
        >
          <span style="float: left">{{ item.phone }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{
            item.name
          }}</span>
        </el-option>
      </el-select>
      <span class="left15px">日期</span>
      <el-date-picker
        v-model="dateSelectValue"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        @change="dataPickerChange"
      >
      </el-date-picker>
      <el-button type="primary" class="left15px" @click="handleQueryBtnClick"
        >查询</el-button
      >
      <!-- <el-button @click="handleDeleteBtnClick">删除</el-button> -->
    </div>
    <!-- 第二行的容器 -->
    <div class="second_wrap">
      <!-- seconde-left-container -->
      <div class="seconde_left_wrap">
        <span>充值类型</span>
        <el-select v-model="payTypeSelectValue" placeholder="请选择">
          <el-option
            v-for="item in payTypeSelectValueList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input
          v-model="payMoneyInputValue"
          placeholder="请输入充值金额"
          class="left15px"
        ></el-input>
        <el-input
          v-model="givMoneyInputValue"
          placeholder="赠送金额"
          class="left15px"
        ></el-input>
        <el-button type="primary" class="left15px" @click="handlePayBtnClick"
          >充值</el-button
        >
      </div>
      <!-- 充值序号区域 -->
      <!-- <div class="seconde_right_wrap">
        <span>充值序号:{{ sequence }}</span>
      </div> -->
    </div>
    <!-- <div class="third_wrap"></div> -->
    <!-- 表格区域 -->
    <!-- 在这里不能用table_container类名 -->
    <!-- <div class="table_container"> -->
    <div class="third_wrap">
      <!-- 左边的表格 -->
      <div class="left_table">
        <el-table
          highlight-current-row
          :data="totalTableData"
          style="width: 100%"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '30px' }"
          border
          height="66vh"
          @row-click="leftTableRowClick"
        >
          <el-table-column prop="vipPhone" label="VIP"> </el-table-column>
          <!-- 客户简称后端没有返回值,估计后端放错位置，放到右边表格去了 -->
          <el-table-column prop="vipName" label="客户简称"> </el-table-column>
          <el-table-column prop="recharge" label="充值"> </el-table-column>
          <el-table-column prop="sendMoney" label="赠送金额"> </el-table-column>
        </el-table>
      </div>
      <!-- 右边的表格 -->
      <div class="right_table">
        <el-table
          :data="AfterChangeData"
          style="width: 100%"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '30px' }"
          border
          highlight-current-row
          height="66vh"
          @row-click="rightTableRowClick"
        >
          <el-table-column type="index" label="序号" width="60">
          </el-table-column>
          <el-table-column prop="createTime" label="日期"> </el-table-column>
          <el-table-column prop="sequence" label="充值序号"> </el-table-column>
          <el-table-column prop="recharge" label="充值"> </el-table-column>
          <el-table-column prop="vipPhone" label="VIP"> </el-table-column>
          <el-table-column prop="vipName" label="姓名"> </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 底部分页 -->
    <div class="page_container">
      <!-- 左边分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[20, 40, 60, 80]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="leftPageTotal"
      >
      </el-pagination>
      <!-- 右边分页 -->
      <el-pagination
        @size-change="handleSizeChange2"
        @current-change="handleCurrentChange2"
        :current-page="pageNo"
        :page-sizes="[20, 40, 60, 80]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totlaPageTotal"
      >
      </el-pagination>
    </div>
    <!-- 密码弹出框 -->
    <!-- <el-dialog
      title="请输入该vip充值密码"
      :visible.sync="isShowPasswordDialog"
      width="20%"
      top="20vh"
      :close-on-click-modal="false"
    >
      <el-input
        v-model="passwordInputValue"
        show-password
        placeholder="请输入密码"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowPasswordDialog = false">取 消</el-button>
        <el-button type="primary" @click="passwordDialogConfirmBtnClick"
          >确 定</el-button
        >
      </span>
    </el-dialog> -->
    <!-- 密码弹出框 -->
    <div class="password_dialog_container">
      <el-dialog
        :visible.sync="isShowPasswordDialog"
        width="20%"
        top="30vh"
        :close-on-click-modal="false"
      >
        <template #title> <span class="psw_title">密码验证</span> </template>
        <p style="margin-bottom: 10px; color: #000">请输入支付密码</p>
        <el-input v-model="passwordInputValue" type="password"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowPasswordDialog = false">取 消</el-button>
          <el-button type="primary" @click="passwordDialogConfirmBtnClick"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 引入基础api
import {
  get_vip_customer_data_api,
  check_password_api
} from '../../../../../request/page_base_api/page_base_api.js'
// 导入这个模块需要的接口
import {
  query_vip_pay_notes_api,
  pay_api,
  delete_pay_notes_api
} from '../../../../../request/store/store_baseInfo_request.js'
export default {
  data() {
    return {
      // 左边page默认第一页
      pageNo: 1,
      // 右边分页的总条数
      totlaPageTotal: 0,
      //
      //
      pageSize: 20,
      /*
        上面是条数分页表格
      */
      leftPageTotal: 0,
      // 点击查询的时候，拿到后端返回的大对象
      bigObj: {},
      // 当点击左边表格的row的时候，拿到的对象
      leftTableCurrentSelectRow: {},
      // 默认显示第一页
      currentPage4: 1,
      limit: 30, // 分页条数
      page: 1, // 分页数
      // 控制密码dialog的显示和隐藏
      isShowPasswordDialog: false,
      // 左边分页总条数
      totalPageTotal: 0,
      // 密码输入框的值
      passwordInputValue: '',
      // VIP下拉框选中的值和数组
      VipPullSelectValue: '',
      VipPullSelectValueList: [],
      // 日期选中的值是一个数组，第一个item为开始时间，第二个为结束时间
      dateSelectValue: null, // 想要一进来就显示时间，那么就直接给时间格式就行,直接赋值为空，不能用空数组
      // 充值类型选中的值和数据
      payTypeSelectValue: '',
      payTypeSelectValueList: [
        { label: '现金', value: 0 },
        { label: '转账', value: 1 }
      ],
      // 充值金额输入的值
      payMoneyInputValue: '',
      // 赠送金额输入的值
      givMoneyInputValue: '',
      // 左边总的表格的数据
      totalTableData: [],
      // 右边充值记录表格的数据
      payRecordTableData: [],
      AfterChangeData: [],
      // 充值序号
      sequence: ''
    }
  },
  computed: {
    // 这个是右边表格的分页的时候，前端实现的分页的方法（这个是表格数据）
    // AfterChangeData: {
    //   get() {
    //     {
    //       let start = (this.pageNo - 1) * this.pageSize
    //       let end = this.pageNo * this.pageSize
    //       // 数组的浅拷贝,从全部数据的表格中拷贝
    //       return this.payRecordTableData.slice(start, end)
    //     }
    //   },
    //   set() {}
    // }
  },
  created() {
    // 获取vip数据的方法
    this.get_vip_customer_data()
  },
  methods: {
    //分页大小改变
    handleSizeChange2(val) {
      this.pageSize = val
    },
    //当前页数改变
    handleCurrentChange2(val) {
      this.pageNo = val
    },
    /*  */
    async get_vip_customer_data() {
      // 获取vip数据的方法
      console.log(this.$store.state.currentStoreData.no)
      const { data: res } = await get_vip_customer_data_api({
        directSaleNo: this.$store.state.currentStoreData.no
      })
      // console.log(res, 'get_vip_customer_data_api')
      if (!res || res.code !== 200) return
      // 赋值给vip下拉选择框
      this.VipPullSelectValueList = res.data
    },
    // 每页显示多少条发生概不的时候，触发的函数
    handleSizeChange(pageSize) {
      // console.log('我是handleSizeChange')
      // 直接改全局显示多少条数据就行
      this.limit = pageSize
      this.handleQueryBtnClick()
    },
    handleCurrentChange(page) {
      this.page = page
      this.handleQueryBtnClick()
    },
    // 左边表格的row被点击
    leftTableRowClick(row) {
      this.leftTableCurrentSelectRow = row
      let vipPhone = row.vipPhone
      // // 拿到数组，遍历数组，格式化日期
      this.bigObj.info[this.leftTableCurrentSelectRow.vipPhone].map((item) => {
        if (item.createTime) {
          item.createTime = this.$moment(item.createTime).format('YYYY-MM-DD')
        }
      })
      // 赋值给要浅拷贝的数组
      this.payRecordTableData =
        this.bigObj.info[this.leftTableCurrentSelectRow.vipPhone]
      //赋值给要浅拷贝的数组total数
      this.totlaPageTotal =
        this.bigObj.info[this.leftTableCurrentSelectRow.vipPhone].length
      // this.rightPageTotal = this.payRecordTableData.length

      /**
       *  -------- 新增 --------
       */
      this.AfterChangeData = this.bigObj.info[vipPhone]
    },
    // 点击查询按钮的时候，触发的函数
    async handleQueryBtnClick() {
      console.log(this.dateSelectValue)
      // console.log(this.dateSelectValue)
      // 拼接后端需要的数据对象
      const queryParamsObj = {
        startTime: this.dateSelectValue
          ? this.dateSelectValue[0] + ' ' + '00:00:00'
          : '',
        endTime: this.dateSelectValue
          ? this.dateSelectValue[1] + ' ' + '23:59:59'
          : '',
        vipPhone: this.VipPullSelectValue,
        page: this.page,
        limit: this.limit
      }
      console.log(queryParamsObj)
      const { data } = await query_vip_pay_notes_api(queryParamsObj)
      if (data && data.code === 200) {
        // 保存大对象，放在data中
        this.bigObj = data.data
        // 获取总条数
        this.leftPageTotal = data.total
        // 赋值给左边表格
        this.totalTableData = data.data.total

        /**
         *  -------- 新增 --------
         */
        this.AfterChangeData = []
      } else {
        console.log('11')
        this.totalTableData = []
        this.AfterChangeData = []
      }

      // console.log(res, 'query_vip_pay_notes_api')
      // if (res.code !== 200) return
      // // 请求成功，没有数据，提示一下用户，并且清除原来两个表格中的数据，并且退出这个函数
      // if (!res.data.total.length) {
      //   this.$message.warning('暂无数据')
      //   this.totalTableData = []
      //   this.payRecordTableData = []
      //   return
      // }

      // 保存大对象，放在data中
      // this.bigObj = res.data
      // 获取总条数
      // this.leftPageTotal = res.total
      // 赋值给左边表格
      // this.totalTableData = res.data.total
      /* 当我点击左边表格的时候，拿到表格中对象的phone去info对象里面找对用的数组显示在右边表格 */

      // // 赋值给右边表格
      // this.payRecordTableData =
      //   res.data.info[this.leftTableCurrentSelectRow.vipPhone]
      // 拿的是total的充值序号
      // this.sequence = res.data.total[0].sequence
    },
    // 时间改变的时候，触发的函数
    dataPickerChange(val) {},
    /*
      充值按钮被点击的时候，触发的函数

    */
    async handlePayBtnClick() {
      // console.log(this.payTypeSelectValue, 'payTypeSelectValue')
      // 必须要选择要充值的vip
      if (!this.VipPullSelectValue) {
        return this.$message.warning('请选择要充值的vip')
      }
      if (!this.payMoneyInputValue) {
        return this.$message.warning('请输入要充值的金额')
      }
      if (this.payTypeSelectValue === '') {
        return this.$message.warning('请选择要充值的类型')
      }
      // 弹出对话框，下面的逻辑，给确定按钮
      this.isShowPasswordDialog = true
    },
    /*
      密码弹出确定按钮被点击的时候，触发的函数
    */
    async passwordDialogConfirmBtnClick() {
      // 先对比密码是否正确
      // 遍历选中的对象，拿到对应的属性，根据手机号来确定唯一的值(拿到对应的项)
      const currentSelectItem = this.VipPullSelectValueList.find((item) => {
        return item.phone === this.VipPullSelectValue
      })
      console.log(currentSelectItem, 'currentItem') // 知道选中的是哪个VIP

      /*
          后端要求，给md5加密的密码给他，拼接规则 phone!用户输入的值
      */
      const jia_mi_psw = this.$md5(
        `${currentSelectItem.phone}:${this.passwordInputValue}`
      )

      // console.log('1111', jia_mi_psw)
      const jiaMiParams = {
        phone: currentSelectItem.phone,
        pass: jia_mi_psw
      }
      const { data: rePsw } = await check_password_api(jiaMiParams)
      // console.log('rePsw', rePsw)
      // 如果密码不正确，直接return
      if (!rePsw.data) {
        return this.$message.warning('密码输入不正确,请重新输入')
      }
      // 如果密码正确，那么就可以发起ajax请求，添加充值金额
      // 拼接要发给后端的参数对象
      const payParamsObj = {
        createTime: new Date(), // 创建时间
        directSaleNo: currentSelectItem.directSaleNo, // 直营店编号
        id: currentSelectItem.id, // id编号
        recharge: this.payMoneyInputValue, // 充值金额
        rechargeType: this.payTypeSelectValue, //充值类型（0现金1转账）
        sendMoney: this.givMoneyInputValue, // 赠送金额
        // sequence: '', // 充值序号 (后端没有返回给前端)要充值了才有返回
        softwareCustomerId: currentSelectItem.softwareCustomerId, // 软件客户ID
        status: currentSelectItem.status, // 状态（0正常1禁用）
        vipName: currentSelectItem.name, // VIP姓名
        // vipPersonnel: '', // 职员(后端没有返回给前端)要充值了才有返回
        vipPhone: this.VipPullSelectValue // 充值VIP
      }
      console.log(payParamsObj, 'payParamsObj')
      const { data: res } = await pay_api(payParamsObj)
      console.log(res, 'pay_api')
      // 充值不成功直接提示用户，并且return
      if (res.code !== 200) {
        return this.$message.warning('服务器错误，请稍后再试')
      }
      // 充值成功
      // 拿到后端返回的数据，并且一个拼接新的对象，push到数组
      const addItem = {
        createTime: this.$moment(new Date()).format('YYYY-MM-DD'),
        sequence: res.data,
        recharge: this.payMoneyInputValue,
        vipPhone: this.VipPullSelectValue,
        vipName: currentSelectItem.name
      }
      // 添加到数组去
      this.payRecordTableData.push(addItem)
      // console.log(addItem, 'addItem')
      this.$message.success('充值成功')
      // 充值成功，之后清除密码，和金额
      this.payMoneyInputValue = ''
      this.givMoneyInputValue = ''
      this.passwordInputValue = ''
      // 充值成功之后，关闭dialog
      this.isShowPasswordDialog = false
    },
    // 右边表格的行被点击的时候，触发的函数
    rightTableRowClick(row) {
      console.log(row)
      // 拿到每一行的充值序号，删除的时候，后端要这个参数
      this.sequence = row.sequence
    },
    // 点击删除按钮的时候，触发的函数
    async handleDeleteBtnClick() {
      // 点击删除的时候，必须要判断一下，是否已经在表格中拿到这个充值序号，否则直接return
      if (!this.sequence) return
      const { data: res } = await delete_pay_notes_api({
        sequence: this.sequence
      })
      console.log(res)
      if (res.code !== 200) return this.$message.warning('删除失败，请稍后再试')
      // 删除成功，之后在后边的表格中，根据充值序号找到这一项，直接删掉
      const index = this.payRecordTableData.findIndex((item) => {
        return item.sequence === this.sequence
      })
      this.payRecordTableData.splice(index, 1)
      // 提示用户删除成功
      this.$message.success('删除成功')
    }
  },
  components: {}
}
</script>

<style lang="less" scoped>
// 密码dialog样式
.password_dialog_container {
  //输入框的样式
  // input输入框的样式
  /deep/.el-input {
    // 宽度生效
    width: 100%;
    height: 32px;
    .el-input__inner {
      height: 32px;
    }
  }
  /deep/.el-dialog__header {
    display: flex;
    align-items: center;
    font-weight: 800;
    padding-left: 10px !important;
    padding: 0;
    background: #f2f5fa;
    height: 40px;
    .el-dialog__headerbtn {
      top: 11px;
      right: 14px;
    }
  }
}
// 控制弹出框的样式
/deep/.el-dialog__body {
  padding: 8px 20px;
}
span {
  margin-right: 8px;
}
.left15px {
  margin-left: 15px;
}
// 第一行容器的样式
.first_wrap {
  // 下面是一个下拉框的样式
  /deep/.el-select {
    // 宽已经生效
    width: 160px;
    height: 32px;
    .el-input--suffix {
      height: 32px;
      .el-input__inner {
        height: 32px;
        font-size: 13px;
      }
      .el-input__icon {
        line-height: unset;
      }
    }
  }
  // 到这里结束下拉框样式
  // 时间选择器的样式
  /deep/.el-date-editor {
    width: 300px;
    height: 32px;
    // 在这个高度上，调整这个时钟icon的行高居中
    .el-range__icon {
      line-height: 27px;
    }
    // 在这个高度上调整这个 '至'显示居中
    .el-range-separator {
      line-height: 26px;
      width: 8%;
    }
  }
}
// 第二行容器的样式
.second_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  width: 100%;
  height: 64px;
  background-color: #f8f8f8;
  /deep/.el-select {
    // 宽已经生效
    width: 160px;
    height: 32px;
    .el-input--suffix {
      width: 160px;

      height: 32px;
      .el-input__inner {
        width: 160px;

        height: 32px;
      }
      .el-input__icon {
        line-height: unset;
      }
    }
  }
  // input输入框的样式
  /deep/.el-input {
    // 宽度生效
    width: 300px;
    height: 32px;
    .el-input__inner {
      height: 32px;
    }
  }
}
// 表格容器 (双表格的样式)
.third_wrap {
  display: flex;
  margin-top: 15px;
  .left_table {
    width: 35%;
    padding-right: 5px;
    border-right: 2px solid #f4f4f4;
  }
  .right_table {
    width: 65%;
    padding-left: 5px;
  }
}
/deep/.el-range__close-icon {
  line-height: 26px;
}
// 分页的样式
.page_container {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  /deep/.el-input--suffix {
    .el-input__inner {
      width: 100px;
    }
  }
}
</style>
